<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用计算属性 getter 和 setter</title>
</head>
<body>
<div id="app">
    姓氏：<input type="text" name="fistName" v-on:keyup.enter="onFirstName" id="fistName" v-bind:value="firstName">
    <br>
    名字：<input type="text" name="familyName" v-on:keyup.enter="onFamilyName" id="familyName" v-bind:value="familyName">

    <!--  直接使用模板差值实现  -->
    <div>姓名：{{familyName}} {{firstName}}</div>
    <div>姓名：{{ getFullName() }}</div>
    <div>姓名：{{ fullName }}</div>
    姓名：<input type="text" name="fullName" v-on:keyup.enter="onFullName" id="fullName" v-bind:value="fullName">
</div>
<script src="../../../../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                firstName: null,
                familyName: null,
            }
        },
        methods: {
            onFirstName(event) {
                let element = document.getElementById("fistName")
                console.log(element.value);
                this.firstName = element.value
            },
            onFamilyName(event) {
                let element = document.getElementById("familyName")
                console.log(element.value);
                this.familyName = element.value
            },

            getFullName() {
                console.log("调用了 getFullName");
                return this.familyName + " " + this.firstName
            },

            onFullName(event){
                let element = document.getElementById("fullName")
                console.log(element.value);
                this.fullName = element.value
            }

        },

        computed: {
            fullName:{
                get(){
                    return this.familyName + " " + this.firstName
                },

                set(value){
                    console.log("设置了 fullname: " + value);
                    let name = value.split(" ")
                    console.log(name);
                    this.familyName = name[0]
                    this.firstName = name[1]
                }
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>